<template>
    <div class="sn-mask">
        <i class="sn-mask-loading">
        </i>
    </div>
</template>
<script>
export default {
    name: 'maskLoading'
}
</script>
<style lang='scss' scoped>
.sn-mask {
    position: fixed;
    top: 2rem;
    bottom: 2rem;
    left: 0;
    width: 100%;
    z-index: 1000;
    .sn-mask-loading {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -.36rem 0 0 -.36rem;
        width: 1.2rem;
        height: 1.2rem;
        background: rgba(0,0,0,0.3);
        border-radius: .2rem;
        &:after {
            width: .72rem;
            -webkit-animation: rotate .7s infinite;
            -webkit-animation-timing-function: linear;
            content: "";
            position: absolute;
            height: .72rem;
            background: url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAAG5wVGOkIJ/OAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURQAAAP///////////////////////////////+tNPsIAAAAJdFJOUwD+ELHdi00wbfD3fpAAAADbSURBVCjPY2CgDLBnBBtHFCCLsIWGGgNBE5Ka1tBgoIiJcwJcqKI1NF2BqcLExQOuraMDbAybiUsAVKisA6pB1cUVwmBKS4epb3GBSLKnwW1ndXEC0+rlcHuYoBaUFyGckygClilHcjWLIMgwJiUFhBCHYABYCNlnggboQkyCDiBSATkABAUwQglTCKIRBUCMRwGsggHoQhCnooBEQQzTHUXRhZgFhdCFAlGMUgZhQWR97I4gR6G4qlGQKdURRZGyIBggm2QIFgliQFPliubwRkHM1OSImcKU4SwAH1UgWePsA0wAAAAASUVORK5CYII=);
            background-size: .72rem;
            top: 50%;
            left: 50%;
            margin: -.36rem 0 0 -.36rem
        }
    }
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}


</style>